<!--meta:{title:'用户登录'}-->
<template>
<div v-show="isShowPage" class="bg" v-bind:style="{'height':WinHeight,'background-image':bgImg}">
    <meta title="用户登录" isCheckLogin=false>
    </meta>
    <link rel="stylesheet" type="text/css" href="/dist/manage/static/style/loaders.css" />
    <div class="LoginContain animated slideInDown">
        <div class="loginForm">
            <span class="systitle">{{systitle}}</span>
            <span class="action" v-if="resultStr!==''">{{resultStr}}</span>
            <input type="text" name="UserName" placeholder="用户名或手机号" class="loginInput" style="top:211px;" v-model="UserInfo.UserName" @keypress="keypress" />
            <input type="password" name="UserPwd" placeholder="密码" class="loginInput" style="top:263px;" v-model="UserInfo.UserPwd" @keypress="keypress" />
            <!--<div class="a1">-->
            <!--<a href="#">忘记密码</a>-->
            <!--<label class="checkbox"><input type="checkbox" name="reme" value="1"/> 记住密码</label>-->
            <!--</div>-->
            <div v-show="loaderIsShow" class=" loader">
                <div class="ball-pulse">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <button type="button" class="loginBtn" @click="DoLogin"></button>
        </div>
    </div>
</div>
</template>

<script>
import AppFrame from '../libs/app-frame';

export default {

    data: function () {
        return {
            UserInfo: {
                UserName: '',
                UserPwd: ''
            },
            resultStr: '',
            isShowPage: false,
            WinHeight: '100%',
            bgImg: 'url(/dist/manage/static/images/bg1.jpg)',
            systitle: '智慧烟草管理平台',
            loaderIsShow: false,
            partnersModel: {
                ct_org_id: 0,
                ct_sign: 'system'
            }
        }

    },

    mounted: function () {
        var self = this;

        AppFrame.Tools.Screen.OnReSize(function (W, H, Scale) {

            self.FixLoginContainTop(H);

        });

        self.FixLoginContainTop($(window).height());

    },

    created() {

        this.init();

    },

    watch: {

        $route: function () {

            //当路由改变时

            let self = this;

            this.init();

        }

    },

    methods: {

        init() {

            this.getPartnersLoginPage();

        },

        async getPartnersLoginPage() {

            let self = this;

            self.partnersModel.ct_sign = self.$route.params.partnersId.toLocaleLowerCase();

            if (self.partnersModel.ct_sign.toLocaleLowerCase() == "system") {

                self.isShowPage = true;

            } else {

                let ret = await AppFrame.Http.Post("/manage-api/system/custom-theme/login-page/getItemBySign", {
                    sign: self.partnersModel.ct_sign
                });
                console.log(ret);
                if (ret && ret.Result == 1) {
                    self.partnersModel = ret.Data;

                    self.bgImg = 'url(' + ret.Data.ct_login_bg + ')';

                    self.systitle = ret.Data.ct_system_name;

                    window.document.title = ret.Data.ct_system_name;

                    self.isShowPage = true;

                } else {

                }

            }

        },

        FixLoginContainTop(H) {

            var Max = -10;

            var loginFormH = $(".loginForm").height();

            // var H = $("body").height();

            this.WinHeight = (H) + "px";

            var loginFormT = H / 2 - loginFormH / 2;

            var t = loginFormT - 298;

            if (t > Max) t = Max;

            $(".LoginContain").css("top", t);

        },

        keypress(e) {

            if (e.which == 13) {

                this.DoLogin();

                return false;

            }

        },

        CheckVal() {

            this.resultStr = "";

            var pass = true;

            var UserName = $("[name='UserName']").val();

            var Pwd = $("[name='UserPwd']").val();

            if (UserName == "" || Pwd == "") {

                $(".action").show();

                this.resultStr = "用户名或密码不能为空";

                return false;

            }

            if (!AppFrame.Tools.CheckStr(UserName)) {

                $(".action").show();

                this.resultStr = "用户名包含非法字符";

                return false;

            }

            return true;

        },

        async DoLogin() {

            var self = this;

            if (!self.CheckVal()) return;

            try {

                var UserName = $("[name='UserName']").val();

                var Pwd = $("[name='UserPwd']").val();

                var Type = 0;

                if (AppFrame.Tools.IsNum(UserName)) {

                    Type = 1;

                }

                this.loaderIsShow = true;

                let postData = {

                    UserName: UserName,

                    Pwd: Pwd,

                    Type: Type,

                    PartnersId: self.partnersModel.ct_org_id,

                    Sign:self.partnersModel.ct_sign

                };

                let ret = await AppFrame.Http.Post("/manage-api/user/Login", postData);
                this.loaderIsShow = false;
                if (ret && ret.Result == 1) {

                    var targetUrl = ret.Data.TargetUrl;
                    localStorage.setItem('partnersSign', self.partnersModel.ct_sign);

                    AppFrame.UserInfo.setUserInfo(ret.Data.UserInfo);

                    AppFrame.UserInfo.setUserModule(ret.Data.UserModules);

                    AppFrame.Socket.CreateWebSocket(ret.Data.UserInfo.UserID);

                    self.$router.replace(targetUrl);

                } else {

                    self.resultStr = ret.Msg;

                }

            } catch (err) {

                console.log(err);

                self.loaderIsShow = false;

                self.resultStr = "服务器连接错误";

            }

        }

    }

};
</script>

<style scoped>
html {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-size: 14px;
}

#app {
    position: absolute;
    overflow: hidden;
}

.bg {
    overflow: hidden;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    position: relative;
}

input,
input:focus,
button,
button:focus {
    outline: none;
    outline: 1px !important;
}

.LoginContain {
    width: 543px;
    height: 741px;
    margin: 0px auto 0px auto;
    background: url(/dist/manage/static/images/login_bg.png);
    position: relative;
    top: -10px;
}

.LoginContain .loginForm {
    position: absolute;
    top: 289px;
    left: 113px;
    width: 316px;
    height: 436px;
}

.LoginContain .loginForm .systitle {
    position: absolute;
    z-index: 10;
    color: #a1cfe3;
    top: 105px;
    left: 30px;
    font-size: 12px;
}

.LoginContain .loginForm .action {
    position: absolute;
    z-index: 10;
    color: red;
    top: 130px;
    left: 30px;
    font-size: 12px;
}

.LoginContain .loginForm .loginInput {
    position: absolute;
    left: 70px;
    width: 210px;
    padding: 8px 0px;
    font-size: 16px;
    background-color: transparent;
    border: 0px;
}

.LoginContain .loginForm .a1 {
    position: absolute;
    z-index: 10;
    top: 310px;
    width: 260px;
    left: 28px;
}

.LoginContain .loginForm .a1 a {
    color: #d07d22;
    font-size: 12px;
    text-decoration: none;
    float: right;
}

.LoginContain .loginForm .loader {
    position: absolute;
    z-index: 10;
    top: 318px;
    width: 260px;
    left: 28px;
    text-align: center;
    /*display: none*/
}

.LoginContain .loginForm .loader .ball-pulse div {
    background-color: rgba(1, 1, 1, 0.3);
}

.checkbox {
    font-size: 12px;
    position: relative;
    top: -5px;
}

.checkbox input {
    position: relative;
    top: 3px;
    background-color: #fff;
    border: 1px solid #ddd;
    margin-right: -2px;
}

.loginBtn {
    background: url(/dist/manage/static/images/loginBtnbg.png) no-repeat;
    width: 260px;
    height: 57px;
    border: 0px;
    position: absolute;
    top: 350px;
    left: 28px;
    cursor: pointer;
}

.loginBtn:hover {
    background: url(/dist/manage/static/images/loginBtnbg_active.png) no-repeat;
}
</style>
